<template>
  <div>
    <el-alert
      style="background-color: #409EFF; color: #222222; font-style: unset; margin-top: 10px; margin-bottom: 20px"
      :closable="false" title="权限组管理"/>
    <el-form size="small" style="margin-left: 15px" :inline="true" class="demo-form-inline">
      <el-form-item label="权限编码">
        <el-input v-model="searchForm.name" placeholder="请输入权限编码" clearable></el-input>
      </el-form-item>
      <el-form-item label="权限名称">
        <el-input v-model="searchForm.nameZh" placeholder="请输入权限名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh-right" @click="resetSearchForm">重置</el-button>
      </el-form-item>
      <el-button style="margin-left: 25px" type="primary" @click="dialogFormVisible = true"><i
        class="el-icon-circle-plus-outline"></i>添加权限
      </el-button>
    </el-form>
    <el-divider></el-divider>

    <!--    <div class="table">-->
    <el-table class="content" tooltip-effect="dark" border
              :data="tableData" :header-cell-style="{'text-align':'center'}">
      <el-table-column prop="name" label="英文名称" align="center">
      </el-table-column>
      <el-table-column prop="nameZh" label="中文名称" align="center"/>
      <el-table-column
        fixed="right"
        label="操作"
        width="250px">
        <template slot-scope="scope">
          <el-button @click="assignRoleHandler(scope.row)" slot="reference" type="text" v-if="scope.row.isShow == '1'">分配权限</el-button>
          <el-divider v-if="scope.row.isShow == '1'" direction="vertical"></el-divider>
          <el-button v-if="scope.row.isShow == '1'" @click="updateRole(scope.row)" slot="reference" type="text">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <template>
            <el-popconfirm
              title="确定删除吗？"
              @confirm="deleteRole(scope.row)"
              v-if="scope.row.isShow == '1'"
            >
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑权限" :visible.sync="dialogFormVisible">
      <el-form :model="editForm" :rules="rules" ref="addForm">
        <el-form-item label="权限编码" prop="name" :label-width="formLabelWidth">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限中文名称" prop="nameZh" :label-width="formLabelWidth">
          <el-input v-model="editForm.nameZh" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editHandle('addForm')">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="分配权限" :visible.sync="assignRole">
      <assign-role ref="assignRole" :menuIds="menuIds" :roleId="assignRoleId" @closeAssignRole="closeAssignRole"></assign-role>
    </el-dialog>
  </div>
  <!--  </div>-->
</template>

<script>
import {validatePhone} from "@/utils/validator";
import assignRole from "@/components/sys/assignRole";
export default {
  name: "Role",
  data() {
    return {
      dialogFormVisible: false,
      //分配权限对话框
      assignRole: false,
      //添加表单的数据
      tableData: [],
      editForm: {},
      rules: {
        name: [{required: true, message: '权限编码不能为空', trigger: 'blur'}],
        nameZh: {required: true, message: '权限中文名称不能为空', trigger: 'change'},
      },
      formLabelWidth: '120px',
      searchForm: {},
      //正则分配的权限的id
      assignRoleId:'',
      menuIds:[]
    };
  },
  components: {
    assignRole,
  },
  mounted() {
    this.load();
  },

  methods: {
    //关闭分配权限的对话框
    closeAssignRole(respCode) {
      if (respCode == 200 || respCode == '200') {
        this.$message({
          message: '操作成功',
          type: 'success',
          onClose: () => { //关闭回调
          }
        });
      }
      this.assignRoleId = '';
      this.assignRole = false;
    },
    assignRoleHandler(row) {
      this.assignRoleId = row.id; //传入子组件的参数
      this.assignRole = true;
      this.loadMenuFormRole(row.id)
    },
    loadMenuFormRole(id) {
      this.axios.get('/sys/menuRole/getMenuByRoleId/' + id).then(resp => {
        //后端需要返回含有idList的东西
        let menuIds = [];
        resp.data.forEach(data => {
          menuIds.push(data.menuId)
        })
        console.log("后端获取到的menus");
        console.log(menuIds);
        this.$refs.assignRole.$refs.roleTree.setCheckedKeys([]);
        this.menuIds = menuIds
        // this.$refs.assignRole.$refs.roleTree.setCheckedKeys(menuIds);
        // //提交的菜单id
        // this.roleForm = resp.data
      })
    },
    updateRole(row) {
      this.editForm = JSON.parse(JSON.stringify(row))// Object.create(row);
      this.dialogFormVisible = true;
    },
    editHandle(addForm) {
      this.$refs[addForm].validate((valid) => {
        console.log(this.editForm)
        if (valid) {
          this.axios.post('/sys/role/' + (this.editForm.id ? 'update' : 'add'), this.editForm).then(resp => {
            if (resp.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                onClose: () => { //关闭回调
                }
              });
              this.load();
              this.dialogFormVisible = false
            }
          })
        }
      })
    },
    deleteRole(row) {
      this.axios.get('/sys/role/delete/' + row.id,).then(
        (resp) => {
          this.load()
        }
      )
    },
    search() {
      this.axios.post('/sys/role/select', this.searchForm).then((resp) => {
          this.tableData = resp.data;
          this.totalCount = resp.data.length
        }
      )
    },
    resetSearchForm() {
      this.searchForm = {};
      this.load()
    },
    load() {
      this.axios.post('/sys/role/select', this.searchForm).then((resp) => {
          this.tableData = resp.data;
          this.totalCount = resp.data.length
          console.log(resp)
        }
      )
    },


  }
}
</script>

<style scoped>
.table {
  border-radius: 5px;
  margin: 10px;
  background-color: #FAFAFA;
  /*text-align: center;*/
}

.content {
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
  background: #EEFF99;

  /*margin-right: 15px;*/
  /*margin-left: 15px;*/
}

.el-table {
  border-radius: 5px;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 10px;
  width: 98%;
}
</style>
